import defaultImage from "@/assets/default_login_image.jpg";
import { defineComponent, Ref, ref, Transition } from "vue";

export default defineComponent({
  setup(props, { slots }) {
    const copyright = ref(
      "纳汉尼国家公园保护区的鸟瞰图，加拿大西北部 (© Robert Postma/GettyImages)"
    );
    const bingUrl = "https://www.bing.com";
    const bgImagePath: Ref<string | null> = ref(null);

    const showNetworkImage = ref(false);

    fetch("/HPImageArchive.aspx?format=js&idx=0&n=1")
      .then((res) => {
        return res.json();
      })
      .then((i) => {
        if (i.images) {
          bgImagePath.value = bingUrl + i.images[0].url;
          copyright.value = i.images[0].copyright;
        }
      });
    return () => (
      <div class="relative w-screen h-screen overflow-hidden" id="login">
        <div class="relative bottom-0 w-full h-full text-xs text-gray-50">
          {!showNetworkImage.value && (
            <>
              <img src={defaultImage} class="w-screen h-screen" />
              <img
                src={bgImagePath.value as string}
                class="hidden w-screen h-screen"
                onLoad={() => {
                  showNetworkImage.value = true;
                }}
              />
            </>
          )}
          <Transition name="fade">
            {showNetworkImage.value && (
              <img
                src={bgImagePath.value ?? defaultImage}
                class="w-screen h-screen"
              />
            )}
          </Transition>
          <p class="absolute bottom-0 right-0">{copyright.value}</p>
        </div>
        <div class="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full py-15 z-5">
          {slots.default && slots.default()}
        </div>
      </div>
    );
  },
});
